<template>
	<view class="login">
		<view style="width: 100%;">
			<image src="/static/img/login_banner.png" style="width: 100%;" mode=""></image>
		</view>
		<view class="login__title">
			<text>河北省机关事务管理局</text>
			<text style="margin-top: 22rpx;">欢迎您</text>
		</view>
		<view class="login__content">
			<image class="login__content__img" src="/static/icon/user_icon.png" mode=""></image>
			<input class="login__content__input" type="text" v-model="account" placeholder="请输入手机号" />
			<view class="login__content__line"></view>
			<view  class="login__content__no" v-if="account" @click="del(0)">
				<image class="login__content__no__img" src="/static/icon/password_icon_del.png"></image>
			</view>
		</view>
		<view class="login__content">
			<image class="login__content__img" src="/static/icon/password_icon.png" mode=""></image>
			<input class="login__content__input" :type="is_eyes ? 'text' : 'password'" v-model="password" placeholder="请输入密码" />
			<view class="login__content__line"></view>
			<view class="login__content__eyes" v-if="password" @click="changceEyes">
				<image class="login__content__eyes__img" :src="is_eyes ? '/static/icon/password_icon_OpenEyes.png': '/static/icon/password_icon_CloseEyes.png' "></image>
			</view>
			<view  class="login__content__no" v-if="password" @click="del(1)" >
				<image class="login__content__no__img" src="/static/icon/password_icon_del.png" ></image>
			</view>
		</view>
		<view class="login__run" @click="goIndex" :style="account&&password ? 'background-color: #53aeff;':'background-color: #e3e3e3;'">登录</view>
	</view>
</template>

<script>
	import {Debounce} from 'common/utils.js' // 防抖函数（减少函数的调用）
	
	export default {
		data() {
			return {
				account: '', //账号
				password: '', //密码
				is_eyes: false, //密码显隐
			}
		},
		methods: {
			/**
			 * @name 密码可视更换
			 */
			changceEyes() {
				this.is_eyes = !this.is_eyes 
			},
			/**
			 * @name 删除
			 */
			del(index) {
				switch(index) {
					case 0:
						this.account = ''
						break;
					case 1:
						this.password = ''
						break;
				}
			},
			/**
			 * @name 登录
			 */
			goIndex:Debounce(
			function(){
				if(this.account != ""&&this.password != "") {
					//根据id获取人物信息
					this.$api.fSysMLogin({
						username:this.account,
						password:this.password
					}).then((res) => {
						console.log(res.data)
						uni.setStorageSync('token',res.data.result.token)
						uni.setStorageSync('userInfo',res.data.result.userInfo)
						uni.switchTab({
							url:'/pages/index/index'
						})
					}).catch(res => {
						console.log(res);
						if(res.data.code == 500) {
							uni.showToast({
								title:'用户名或密码错误',
								icon:'none',
								duration:2000
							})
						}
					})
				}else{
					uni.showToast({
						title:'请输入账号密码',
						icon:'none',
						duration:2000
					})
				}
			}),
		}
	}
</script>

<style scoped lang="less">
	.login {
		width: 100%;
		background-color: #FFFFFF;
		position: relative;
		z-index: 9;
		&__title {
			font-size: 42rpx;font-weight: 700;color: #007AFF;margin-top: 22rpx;width: 100%;height: 126rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;
		}
		&__content {
			margin-top: 48rpx;padding-left: 20%;margin-right: 10%;position: relative;
			&__img {
				width: 36rpx;height: 36rpx;position: absolute;top: 4rpx;left: 14%;
			}
			&__input {
				padding-right: 118rpx;font-size: 28rpx;
			}
			&__line {
				border: 2rpx solid #f3f3f3;
			}
			&__no {
				width: 35rpx;height: 35rpx;position: absolute;right: 16rpx;bottom: 16rpx;
				&__img {
					width: 35rpx;height: 35rpx;
				}
			}
			&__eyes {
				width: 35rpx;height: 35rpx;position: absolute;right: 76rpx;bottom: 16rpx;
				&__img {
					width: 35rpx;height: 35rpx;
				}
			}
		}
		&__run {
			height: 82rpx;font-size: 42rpx;color: #FFFFFF;margin-top: 90rpx;margin-left: 15%;margin-right: 15%;border-radius: 41rpx; border: 2rpx solid #e3e3e3;display: flex;align-items: center;justify-content: center;
		}
	}
</style>
